<template>
	<view :style="{'--bgcolor':pageData.bgColor, '--price-color': pageData.priceColor || '#E90B08', '--color': color}" 
		v-if="infoData.length">
		<!-- 一行两个 -->
		<view class="content d-flex f-wrap j-sb" v-if="pageData.listStyle == 2" :style="{'--height-2': pageData.picScale ? 332 * pageData.picScale + 'rpx' : '332rpx'}">
			<view class="list m-bot20" :class="{'shadow':pageData.shadow==1}" v-for="(item,index) in infoData" :key="index" @click="toGoods(item.goods_id)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_img bor_radius_top10"></image>
				<view class="mask2" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold2"></image>
				</view>
				<view class="cont rows d-flex f-column padding10 j-sb">
					<view class="black size30 ellipsis_2" :style="{'font-weight': pageData.fontWeight||300}">{{item.name}}</view>
					<view class="row a-center">
						<view class="flex-1">
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{parseFloat(item.price)}}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
							<view class="h6 color_77 bold300 m-left10 d-inline-block" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
						</view>
						<view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{color: pageData.btnColor || '#E90B08'}"></view>
					</view>
				</view>
			</view>	
		</view>
		<!-- 一行一个 -->
		<view class="content" v-if="pageData.listStyle == 1">
			<view class="list1 row bgwhite bor_radius_10 m-bot20" :class="{'shadow':pageData.shadow==1}" v-for="(item,index) in infoData" :key="index" @click="toGoods(item.goods_id)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
				<view class="mask1" v-if="!item.stock"></view>
				<image :src="imgUrl + 'sold.png'" class="sold1" v-if="!item.stock"></image>
				<view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
					<view class="rows m-top20">
						<text class="black size32 ellipsis_2" :style="{'font-weight': pageData.fontWeight||300}">{{item.name}}</text>
						<text class="color_77 size28 m-top20 ellipsis bold300">{{item.info}}</text>
					</view>
					<view class="row j-sb a-center m-bot20">
						<view>
							<text class="price size26">￥</text>
							<text class="price size34 bold500">{{parseFloat(item.price)}}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="size26 line-through color_C0 bold300 m-left10">￥{{parseFloat(item.full_price)}}</text>
							<view class="h6 color_77 bold300 m-top10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</view>
						</view>
						<view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{color: pageData.btnColor || '#E90B08'}"></view>
					</view>
				</view>
			</view>
		</view>	
		<!-- 一行三个 -->
		<view class="content" v-if="pageData.listStyle == 3">
			<view class="padding30-20 bgwhite bor_radius_20" :class="{'shadow': pageData.shadow == 1}">
				<view class="d-flex a-center">
					<view class="flex-1 size32 bold">{{ pageData.title }}</view>
					<view class="m-left20 color_99" @click="toCates">
						<text>更多</text>
						<text class="iconfont icon-xiangyouxiayiye h6"></text>
					</view>
				</view>
				<view class="d-flex f-wrap">
					<view class="list3 m-top30" v-for="(item,index) in infoData" :key="index" @click="toGoods(item.goods_id)">
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_10 m-bot10"></image>
						<view class="size28 ellipsis m-bot10" :style="{'font-weight': pageData.fontWeight||300}">{{ item.name }}</view>
						<view class="m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
						</view>
						<view class="h6 color_77 bold300 m-bot10" v-if="!pageData.hideSales">已售{{ item.sales_number }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 大图模式 -->
		<view class="content" v-if="pageData.listStyle == 4" :style="{'--height-4': pageData.picScale ? 690 * pageData.picScale + 'rpx' : '460rpx'}">
			<view class="list_4 p-re bgwhite bor_radius_10 m-bot20" :class="{'shadow':pageData.shadow==1}" v-for="(item,index) in infoData" :key="index" @click="toGoods(item.goods_id)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="bor_radius_top10"></image>
				<view class="mask4 bor_radius_10" v-if="!item.stock">
					<image :src="imgUrl + 'sold.png'" class="sold4"></image>
				</view>
				<view class="padding20">
					<view class="black size36 ellipsis" :style="{'font-weight': pageData.fontWeight||500}">{{item.name}}</view>
					<view class="color_33 size30 ellipsis m-top12 bold300">{{item.info}}</view>
					<view class="row j-sb a-center m-top30">
						<view>
							<text class="price size30">￥</text>
							<text class="price size38 bold500">{{parseFloat(item.price)}}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="size30 line-through color_C0 bold300 m-left10">￥{{parseFloat(item.full_price)}}</text>
							<text class="h6 color_77 bold300 m-left30" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
						</view>
						<view class="iconfont size46 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{color: pageData.btnColor || '#E90B08'}"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 榜单 -->
		<view class="content" v-if="pageData.listStyle == 5">
			<view class="rank bor_radius_20 p-top30 p-left20" :style="{backgroundImage: pageData.img ? 'url(' + pageData.img + ')' : 'url(' + imgUrl + 'goods_rank_bg.png' + ')'}">
				<view class="size36 bold t-letter4 m-bot40 ellipsis" v-if="pageData.title" :style="{color: pageData.titColor || 'white'}">{{ pageData.title }}</view>
				<view style="height: 88rpx" v-else></view>
				<swiper class="swiper" next-margin="160rpx">
					<swiper-item v-for="(group,index) in groups" :key="index">
						<view class="swiper-item bor_radius_20">
							<view class="m-bot24 d-flex p-re" v-for="item in group" :key="item.goods_id" @click="toGoods(item.goods_id)">
								<image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
								<view class="mask5" v-if="!item.stock"></view>
								<image :src="imgUrl + 'sold.png'" class="sold5" v-if="!item.stock"></image>
								<view class="flex-1 p-left20 p-top12">
									<view class="size28 color_22 ellipsis m-bot20" :style="{'font-weight': pageData.fontWeight||300}">{{ item.name }}</view>
									<view>
										<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
										<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
									</view>
									<view class="btn size36 p-ab iconfont" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
										:style="{color: pageData.btnColor || '#E90B08'}"></view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 卡片轮播 -->
		<view class="content" v-if="pageData.listStyle == 6">
			<swiper class="cardSwiper" :current="current" previous-margin="120rpx" next-margin="120rpx" circular @change="swiperChange">
				<swiper-item v-for="(item,index) in infoData" :key="index">
					<view class="item wh padding30 bgwhite bor_radius_10 text-center" @click="toGoods(item.goods_id)"
						:class="{'active': current == index, 'shadow': pageData.shadow == 1}">
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="pic"></image>
						<view class="size30 ellipsis m-top10" :style="{'font-weight': pageData.fontWeight||300}">{{ item.name }}</view>
						<view class="m-top10 m-bot10">
							<text class="price size30 bold500">￥{{ parseFloat(item.price) }}</text>
							<text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
							<text class="h6 color_77 bold300 m-left10" v-if="item.sales_number && !pageData.hideSales">已售{{ item.sales_number }}</text>
						</view>
						<view class="btn white d-inline-block" :style="{background: pageData.btnColor || '#E90B08'}">
							<text class="iconfont h6 m-right8" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"></text>
							<text>{{ item.price_name || '立即购买' }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="flexac m-top30">
				<view class="indicator bor_radius_10" :class="{'active': current == index}" @click="current = index"
					v-for="(item,index) in infoData" :key="index">
					<image :src="$imgUrls(item.img)" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'product',
		props:['pageData'],
		data() {
			return {
				infoData:[],
				groups: [],
				imgUrl: this.imgUrl + 'Uploads/diy/img/',
				current: 0
			}
		},
		computed: {
			...mapState(['color'])
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo(){
				const result = await this.$getBlockInfo(this.pageData.list)
				if(!result.list.length) return
				this.infoData = result.list || []
				if(this.pageData.listStyle == 5){
					this.groups = []
					let size = 4
					for(let i = 0; i < this.infoData.length; i += size){
						let group = this.infoData.slice(i, i + size)
						this.groups.push(group)
					}
				}
			},
			swiperChange(e){
				this.current = e.detail.current
			},
			toGoods(id){
				let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + id
				if(this.pageData.mode == 1) path = path + '&mode=1'
				if(this.pageData.mode == 2) path = path + '&mode=1&scan=1'
				this.toUrl(path) 
			},
			toCates(){
				if(!this.pageData.mode) this.$rectTo('/pages/classify/classify')
				if(this.pageData.mode == 1) this.$rectTo('/pages/classify/repast')
				if(this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width:100%;
		padding:30rpx;
		background-color: var(--bgcolor);
	}
	// 一行两个
	.list{
		width:332rpx;
		// height: 500rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		.cont {
			min-height: 168rpx;
		}
		.sold2{
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -74rpx 0 0 -74rpx;
		}
	}
	.list_img,.mask2{
		width:332rpx;
		height: var(--height-2);
	}
	// 一行一个
	.list1{
		position: relative;
		.sold1{
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			top: 50%;
			margin-top: -74rpx;
			left: 72rpx;
		}
	}
	.list_imgs,.mask1{
		width:292rpx;
		height: 292rpx;
	}
	// 一行三个
	.list3 {
		width: 200rpx;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		&:not(:nth-child(3n)){
			margin-right: 25rpx;
		}
	}
	// 大图模式
	.list_4 {
		width: 690rpx;
		image,.mask4{
			width: 690rpx;
			height: var(--height-4);
		}
		.sold4{
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -100rpx 0 0 -100rpx;
		}
	}
	.mask1,.mask2,.mask4,.mask5{
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.shadow {
		box-shadow: 0 2px 4px rgba(0,0,0,.06);
	}
	// 榜单
	.rank {
		height: 800rpx;
		background-repeat: no-repeat;
		background-size: cover;
		.swiper {
			height: 650rpx;
			.swiper-item {
				width: 480rpx;
				height: 650rpx;
				background: rgba(255,255,255,0.76);
				padding: 24rpx 28rpx 0 24rpx;
				.pic,.mask5 {
					width: 130rpx;
					height: 130rpx;
				}
				.sold5{
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					top: 50%;
					margin-top: -40rpx;
					left: 25rpx;
				}
				.btn {
					right: 0;
					top: 80rpx;
					z-index: 10;
				}
			}
		}
	}
	// 卡片轮播
	.cardSwiper {
		height: 600rpx;
		.item {
			transform: scale(0.8);
			transition: transform 0.3s ease-in-out 0s;
			&.active {
				transform: scale(0.99);
			}
			.pic {
				height: 390rpx;
			}
			.btn {
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 16rpx;
				border-radius: 22rpx;
			}
		}
	}
	.indicator {
		width: 80rpx;
		height: 80rpx;
		margin: 0 8rpx;
		box-sizing: content-box;
		&.active {
			border: 2rpx solid var(--color);
		}
	}
	.price {
		color: var(--price-color);
	}
</style>
